<template>
  <div class="sidebar-wrapper" ref="sidebar">
    <div
      v-for="(item, i) in sideList"
      :key="i"
      :class="{ active: active === i }"
      @touchend="scrollTo(i, $event)"
      @touchstart="move = false"
      @touchmove="move = true"
    >{{i === 0 ? '全部' :item}}</div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import moveTo from '@/utils/tool';
export default {
  data () {
    return {
      active: 0,
      move: false,
    };
  },
  computed: {
    ...mapState({
      sideList: (state) => state.sideList,
    }),
  },
  methods: {
    ...mapActions(['getGoodsList']),
    ...mapMutations(['removeGoodsList']),
    scrollTo (i, e) {
      if (this.move) {
        return;
      }
      this.active = i;
      const itemHeight = e.target.offsetHeight;
      const itemTop = e.target.getBoundingClientRect().top;
      const {sidebar} = this.$refs;
      const wrapperHeight = sidebar.offsetHeight;
      const sidebarTop = sidebar.getBoundingClientRect().top
      moveTo(sidebar.scrollTop, itemTop + itemHeight / 2 - sidebarTop - wrapperHeight / 2, sidebar, 'scrollTop');
      // 获取列表页操作
      this.removeGoodsList();
      this.getGoodsList({type: this.sideList[i], page: 1, sortType: 'all'});
    },
  },
};
</script>

<style lang="less" scoped>
.sidebar-wrapper {
  position: fixed;
  left: 0;
  width: 79px;
  top: 135px;
  bottom: 50px;
  overflow: auto;
  background-color: #f8f8f8;
  div {
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    position: relative;
  }
  .active {
    font-weight: bold;
    color: #ff1a90;
  }
  .active::before {
    position: absolute;
    width: 6px;
    height: 18px;
    background-color: #ff1a90;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: "";
  }
}
.sidebar-wrapper::-webkit-scrollbar {
  width: 0px;
  background-color: none;
}
</style>
